<template>
  <div class="template-index-Lu">
    <commpVxeTable
      :key="reCommpVxeTable"
      :config="dataTableConfig"
      :columns="columnsVxe"
      :formItem="formItem"
      ref="administrativeOffice"
      @checkboxChange="checkboxChange"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      >
      <template v-slot:externalOperations="{data}"  >
        <vxe-form-item>
          <template>
            <a-button type="primary" class="blue-btn" style="margin-right:10px;" @click="handleClick">添加</a-button>
            <a-button type="primary" class="red-btn" @click="deleteBatchClick">批量删除</a-button>
          </template>
        </vxe-form-item>
      </template>
      <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
        <a-form layout="inline" class="search-form" >
          <a-form-item>
              <a-button class="blue-btn" type="primary" @click="handleClick(row)">编辑</a-button>
          </a-form-item>
          <a-form-item>
              <a-button class="red-btn" type="primary" @click="deleteClick(row)">删除</a-button>
          </a-form-item>
          <a-form-item>
          </a-form-item>
        </a-form>
      </template>
    </commpVxeTable>
    <applicationForm ref="ApplicationForm" :formData="formData" @success="success"></applicationForm>
  </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import applicationForm from './applicationForm.vue'
import {deletePage,deleteBatch,} from './service/index'
export default {
  components: {
    commpVxeTable,
    applicationForm
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        urlType: true,
        paramet: {}
      },
      columnsVxe:[
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '序号',
          field: 'fxh',
          width: 50,
        },{
          title: '页面名称',
          field: 'fymmc',
        },{
          title: '页面地址',
          field: 'fymdz',
        },{
          title: 'ref',
          field: 'ref',
        },{
          title: '业务类型',
          field: 'fywlx',
        },{
          title: '操作',
          field: 'jobid',
          width:200,
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      formItem: [
        {
          label: '页面名称',
          model: 'fymmc',
        },{
          label: '业务类型',
          model: 'fywlx',
        },
      ],
      idList: [],
      formData: {},
      paramet: {},
    }
  },
  created() {
    this.paramet = JSON.parse(JSON.stringify(this.dataTableConfig.paramet))
  },
  methods: {
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
        val.forEach(item => {
            this.idList.push(item.id)
        });
      }
    },
    // 搜索
    searchEvent(){
        this.dataTableConfig.paramet = {
          ...this.paramet,
        }
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.paramet,
        }
    },
    // 办理
    handleClick(row){
      this.formData = {...row}
      this.$nextTick(_ => {
        this.$refs.ApplicationForm.ApplicationFormVisible = true
      })
    },
    // 弹窗提交成功
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.searchEvent()
      this.idList = []
    },
    // 年休假历史存储记录-批量删除
    deleteClick(row){
      var that = this
      that.$confirm({
          title: '你确定删除当前数据吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            deletePage({id:row.id}).then(res => {
              if(res.code == 200){
                that.reCommpVxeTable = Date.now()
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
    },
    //
    deleteBatchClick(){
      if(this.idList.length == 0){
        this.$message.error('请选择删除项')
      } else {
        var that = this
        that.$confirm({
          title: '你确定删除所选数据吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            let list = that.idList.toString()
            deleteBatch({ids:list}).then(res => {
              if(res.code == 200){
                that.reCommpVxeTable = Date.now()
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      }
    }
  },
}
</script>
<style scoped>
.red-btn{
  color:  white !important;
  border: 1px solid #ed5565 !important;
  background-color: #ed5565 !important;
}
</style>
